<!--
 * @Description:银行卡列表
 * @version: v1.0
 * @Author: Wang Xi
 * @Date: 2023-5-31 9:10:00
 * @LastEditors: WangXi
 * @LastEditTime: 2023-06-15 18:30:02
-->
<template>
	<view class="bank-card-list-container">
		<c-layout>
			<c-navigation-bar @backEvent="backEvent" slot="head"
				:title="currentType === '0'?$t('card.backCard'):$t('card.trcAddress')">
			</c-navigation-bar>
			<view class="content-box">
				<view class="check-box">
					<view :class="`check-item ${currentType === index+''?'is-checked':''}`"
						v-for="(item,index) in [$t('card.card'),$t('card.address')]"
						@click="currentTypeChange(index+'')" :key="index">
						{{item}}
					</view>
				</view>
				<!-- 银行卡轮播 -->
				<view class="bank-box" v-show="currentType === '0'">
					<swiper class="card-banner" :indicator-dots="true" previous-margin="80rpx" next-margin="80rpx"
						:interval="3000" indicator-active-color="#453BD6" :current="current"
						@change="(data)=>{current = data.target.current;addCardInfo = {};bankValue=''}"
						indicator-color="#fff" :duration="1000">
						<swiper-item v-for="(item,id) in list.bank||[]" :key="id">
							<view :class="`swiper-item ${current === id ? 'is-current':''}`">
								<bank-card @del="delBankCard(item)" :data="item"></bank-card>
								<view class="edit-btn" v-if="bankCardDetails.id">
									<text :throttle-time="0" style="width: 150rpx;color: #2934D0 ;"
										v-if="(addCardInfo.id) && addCardInfo.id === bankCardDetails.id"
										@click="cancelEdit">{{$t('system.cancel')}}</text>
									<text :throttle-time="0" class="blue" style="width: 150rpx;color: #2934D0 ;" v-else
										@click="editBank">{{$t('system.edit')}}</text>
								</view>
							</view>
						</swiper-item>
						<swiper-item>
							<view :class="`swiper-item ${current === (list.bank||[]).length ? 'is-current':''}`">
								<bank-card
									:data="{bankNo:current === (list.bank||[]).length ? bankCardDetails.bankNo:''}"></bank-card>
							</view>
						</swiper-item>
					</swiper>
					<view class="card-details">
						<view class="btnBox">
							<h2>{{$t('card.EnterCardDetails')}}</h2>

						</view>

						<view class="input-box">
							<template v-if="(addCardInfo.id) && addCardInfo.id === bankCardDetails.id">
								<view class="selectBox">
									<u-input v-model="bankValue" type="select" :border="true" placeholder=''
										style="padding: 44rpx;font-size: 24rpx;" @click="bankShow=true"
										mode="single-column" />
									<text class="bankTitle">{{$t('card.bankName')}}</text>
								</view>
								<titleInput v-model="addCardInfo.bankNo" @input="val=>input(val,'bankNo')" :rule="'\\W'"
									:title="$t('card.bankNo')" :maxlength="19" inputmode="numeric" type="number">
								</titleInput>
								<titleInput v-model="addCardInfo.bankUserName" :title="$t('card.bankUserName')">
								</titleInput>
								<!-- <titleInput v-model="addCardInfo.bankName" :title="$t('card.bankName')">
								</titleInput> -->

								<!-- 密码校验 -->
								<titleInput v-model="addCardInfo.safecode" type="password" inputmode="numeric"
									:title="$t('bankCard.security_password')">
								</titleInput>
							</template>
							<template v-else>
								<view class="selectBox" v-if="!bankCardDetails.id">
									<u-input v-model="bankValue" type="select" :border="true" placeholder=''
										style="padding: 44rpx;font-size: 24rpx;" @click="bankShow=true"
										mode="single-column" />
									<text class="bankTitle">{{$t('card.bankName')}}</text>
								</view>
								<titleInput v-model="bankCardDetails.bankName" v-else :disabled="bankCardDetails.id"
									:title="$t('card.bankName')">
								</titleInput>
								<titleInput v-model="bankCardDetails.bankNo" @input="val=>input(val,'bankNo')"
									:rule="'\\W'" :disabled="bankCardDetails.id" :title="$t('card.bankNo')"
									:maxlength="19" inputmode="numeric">
								</titleInput>
								<titleInput v-model="bankCardDetails.bankUserName" :disabled="bankCardDetails.id"
									:title="$t('card.bankUserName')">
								</titleInput>
								<titleInput v-model="addCardInfo.safecode" type="password" inputmode="numeric"
									:title="$t('bankCard.security_password')" v-if="!bankCardDetails.id">
								</titleInput>
							</template>
						</view>
						<u-button v-if="!!(!addCardInfo.id && (bankCardDetails.id))"
							:disabled="!!(!addCardInfo.id && (bankCardDetails.id))" :throttle-time="0"
							class="blue keep-btn" @click="addBankCard">{{$t('system.affirm')}}</u-button>
						<u-button :loading="isloading" v-else :throttle-time="0" class="blue keep-btn"
							@click="addBankCard">{{$t('system.affirm')}}</u-button>
					</view>
				</view>
				<!-- usdt -->
				<view class="usdt-box" v-show="currentType === '1'">

					<titleInput v-model="usdtDataByType.bankNo" :title="'TRC-20'" num :maxlength="34" :rule="'\\W'">
						<view class="" style="margin-right: 6rpx;color: #ccc;" slot="right-icon">
							{{usdtDataByType.bankNo?usdtDataByType.bankNo.length:'0'}}
						</view>
					</titleInput>
					<!-- 选择钱包 -->
					<view class="selectBox">
						<u-input v-model="walletValue.network" type="select" :border="true" placeholder=''
							style="padding: 44rpx;font-size: 24rpx;" @click="walletSelectShow=true"
							mode="single-column" />
						<text class="bankTitle">{{$t('card.wallet')}}</text>
					</view>
					<u-button :loading="isloading" :throttle-time="0" class="blue keep-btn2"
						@click="addBankCard">{{$t('system.affirm')}}</u-button>
				</view>
			</view>
		</c-layout>
		<promptDialog ref="promptDialog"></promptDialog>
		<inputPayPassword @finish="payPwdPopFinish" :payPwdPopShow.sync="payPwdPopShow" :maxlength="6" @close="close()"
			:type="1">
			<view class="countDown">
				<view class="">
					{{ $t('orderDetails.within') }}
				</view>
				<u-count-down @end="timeOut" font-size="30" color="#FFFFFF" bg-color="#2934D0" :show-days="false"
					:show-hours="false"></u-count-down>
				<view class="">
					{{ $t('orderDetails.please') }}
				</view>
			</view>
		</inputPayPassword>
		<u-select :cancel-text="$t('system.cancel')" :confirm-text="$t('system.affirm')" :list="bankNameInfo.list"
			value-name="id" label-name="bankName" v-model="bankShow" @confirm="actionSheetCallback"></u-select>
		<u-select :cancel-text="$t('system.cancel')" :confirm-text="$t('system.affirm')" :list="walletList.list"
			value-name="id" label-name="network" v-model="walletSelectShow" @confirm="walletActionSheet"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isloading: false,
				// 银行选择
				bankNameInfo: {
					data: {
						pageNum: 1,
						pageSize: 1000
					},
					list: [],
				},
				//选择银行
				bankValue: '',
				//新增银行卡
				addBankValue: '',
				bankShow: false,
				current: 0,
				/**
				 *当前页面展示的类型
				 * 0 银行卡 1 usdt
				 */
				currentType: '0',
				bankCardData: { // 银行卡信息
					"bankName": "",
					"bankNo": "",
					"bankUserName": "",
					"cardType": "",
					"type": "",
					"usdtType": "",
					"userName": ""
				},
				// 列表
				list: {
					bank: null,
					usdt: {
						'ERC-20': {},
						'TRC-20': {
							bankId: ""
						},
					}
				},
				usdtType: 'TRC-20',
				// 规则
				rules: {
					bankNo: [{
						required: true,
						msg: this.$t('card.bankNoTips')
					}, {
						reg: /^[0-9]{13,19}$/,
						msg: this.$t('card.bankNoTipsLang')
					}],
					bankUserName: [{
						required: true,
						msg: this.$t('card.bankUserNameTips')
					}, ],
					bankName: [{
						required: true,
						msg: this.$t('card.bankNameTips')
					}, ],
				},
				addCardInfo: {
					bankName: '',
					bankUserName: '',
					bankNo: '',
					safecode: ''

				},
				// 付款密码弹出层
				payPwdPopShow: false,
				// 钱包列表
				walletList: {
					data: {
						"pageNum": 1,
						"pageSize": 2000
					},
					list: [],
				},
				// 钱包选择
				walletSelectShow: false,
			};
		},
		onLoad(data) {
			this.$u.post('/app/bank/selectAll', this.bankNameInfo.data).then(res => {
				this.bankNameInfo.list = res.data.records
				console.log(this.bankNameInfo.list, 'bankNameInfo.listbankNameInfo.list');
			})
			this.$u.post('/app/wallet/selectAll', this.walletList.data).then(res => {
				this.walletList.list = res.data.records
			})
			// 传递当前是usdt或者银行卡的类型
			if (data.type !== undefined) {
				this.currentType = data.type
			}
			console.log('hhhhh', data)
			this.getBankCardInfoAjax()
		},
		computed: {
			// 银行卡列表
			bankList() {
				return this.list.bank || []
			},
			bankCardDetails: {
				get() {
					return this.bankList[this.current] || this.addCardInfo
				},
				set(val) {
					this.bankList[this.current] ? this.bankList[this.current] = val : this.addCardInfo = val
				}
			},
			// usdt数据 通过当前类型返回 
			usdtDataByType: {
				get() {
					return this.list.usdt[this.usdtType]
				},
				set(val) {
					console.log(this.list.usdt[this.usdtType], 'this.list.usdt[this.usdtType]', val);
					this.list.usdt[this.usdtType] = val
				},
			},
			walletValue() {
				const bankId = this.usdtDataByType.bankId
				console.log(bankId);
				return bankId ? this.walletList.list.find(f => f.id == bankId) : ""
			},
		},
		methods: {
			actionSheetCallback(e) {
				this.addCardInfo.bankId = e[0].value
				console.log(this.bankCardDetails.bankId, 'this.bankCardDetails.bankId');
				this.bankValue = e[0].label
			},
			// 选中钱包
			walletActionSheet(e) {
				this.usdtDataByType = {
					...this.usdtDataByType,
					bankId: e[0].value
				}
				// this.walletValue = e[0]
			},
			payPwdPopFinish(val) {
				console.log(val)
			},
			close() {
				console.log('关闭')
			},
			// 校验密码
			async verifyIsSetPwdAjax(cb) {
				const status = await this.$u.api.verifyIsSetPwdAjax(0)
				if (!status) {
					this.$refs.promptDialog.show({
						confirm: (close) => {
							uni.navigateTo({
								url: "/pages/modify/modify?type=1"
							})
							close(true)
						},
						close: (t = false) => {
							// (!t) && this.publicJS.backOption()
						},
						title: this.$t('system.Hint'),
						des: this.$t('product.PleaseSet'),
						btnText: this.$t('product.GoToAdd'),
					})
					return
				} else {
					cb && cb()
				}
			},
			addBankCard() {
				// 这步 校验是否设置密码不过
				this.verifyIsSetPwdAjax(() => {
					this.addCardInfo.bankName = this.bankValue
					if (this.currentType == 0) {
						if (this.addCardInfo.safecode) {
							this.isloading = true
							this.$u.post(`/app/user/check/bank/password?password=${this.addCardInfo.safecode}`)
								.then(res => {
									if (res.code == 200) {
										this.saveBankCardInfoAjax()
									} else {
										this.$u.toast(this.$t('bankCard.password_error'))
									}
								}).catch(() => {
									this.isloading = false
								})
						} else {
							this.$u.toast(this.$t('bankCard.enter_secure_password'))
						}
					} else {
						console.log(this.list)
						this.isloading = true
						this.saveBankCardInfoAjax()
					}
				})


			},
			// 获取银行卡&比特币信息
			getBankCardInfoAjax() {
				// 当前为usdt有类型时 传递参数
				console.log(this.currentType)
				const url = '/app/user/bank/bank/' + this.currentType +
					`${this.currentType ==='1'? `/${this.usdtType}`:''}`
				this.$u.get(url).then(res => {
					// 如果没有data列表为空也要给一个空对象避免读取错误
					if (this.currentType === '0') {
						(this.list.bank = res.data)
					} else {
						const usdtData = res.data[0] || {}
						this.usdtDataByType = usdtData
					}
				})
			},
			// 保存银行卡信息
			saveBankCardInfoAjax() {
				console.log('===========', this.addCardInfo)
				const bankData = {
					...this.bankCardDetails,
					usdtType: '', // usdt类型
					type: this.currentType
				}
				const usdtData = {
					id: this.usdtDataByType.id,
					bankNo: this.usdtDataByType.bankNo,
					bankId: this.usdtDataByType.bankId,
					usdtType: this.usdtType, // usdt类型
					type: this.currentType,

				}
				const currentType = ~~this.currentType
				let data = currentType ? usdtData : bankData
				if (currentType) {
					// 对于 usdt信息的校验。
					if (!/^T[A-Za-z0-9]{33}$/.test(usdtData.bankNo)) {
						this.$u.toast(this.$t('card.usdtEMsg'))
						this.isloading = false
						return
					}
					if (!(usdtData.bankNo || usdtData.bankNo === 0)) {
						this.$u.toast(this.$t('card.addressTips'))
						this.isloading = false
						return
					}
					if (!this.usdtDataByType.bankId) {
						this.$u.toast(this.$t('card.selectWallet'))
						this.isloading = false
						return
					}
				} else {
					let rule = {
						...this.rules
					}
					// 如果有 id 字段代表对银行卡的修改 删除了 银行卡的校验  因为卡号脱敏了 校验肯定不生效
					if (this.addCardInfo.id) {
						data = {
							...this.addCardInfo
						}
						if (!data.bankNo) {
							delete rule.bankNo
						}
						data.bankNo = data.bankNo || null
					}
					console.log(rule);
					// 对于银行卡的校验
					const status = this.publicJS.validate(rule, data).status
					console.log(status,'statusstatus');
					console.log(data,'datadatadata');
					if (!status) {
						this.isloading = false
						return
					}
				}
				this.$u.post('/app/user/bank/binding/bank', data).then(res => {
					if (res.code == 200) {
						this.isloading = false
						this.bankValue = ""
					}
					// this.$u.toast(res.msg)
					this.$refs.promptDialog.show({
						confirm: (close) => {
							close()
						},
						close: () => {
							this.addCardInfo = {}
							this.getBankCardInfoAjax()
						},
						des: currentType ? this.$t('card.usdtPayment') : this.$t('card.bankPayment'),
						icon: 'success',
						btnText: this.$t('card.gotIt'),
						title: this.$t('card.success')
					})
				})

			},

			// 银行卡&usdt切换
			currentTypeChange(val) {
				this.currentType = val
				this.getBankCardInfoAjax()
			},
			input(val, key) {},
			onBlur(d) {
				console.log(d);
			},
			onFocus(d) {
				console.log(d);
			},
			editBank() {
				console.log(555);
				this.addCardInfo = {
					...this.bankCardDetails,
					bankNo: ''
				}
				console.log(this.addCardInfo);
				this.bankValue = this.addCardInfo.bankName
			},
			cancelEdit() {
				this.addCardInfo = {}
			},
			// 删除银行卡信息
			delBankCard(data) {
				console.log(data);
				this.$refs.promptDialog.show({
					confirm: (close) => {
						this.$u.post('/app/user/bank/delete/' + data.id).then(res => {
							this.getBankCardInfoAjax()
							close()
						})
					},
					close: () => {

					},
					des: this.$t('card.confirmdelCard'),
					icon: 'tip',
					btnText: this.$t('card.confirm'),
					title: this.$t('settingInfo.hint')
				})
			},
			backEvent() {
				this.publicJS.updateLastPage({
					url: 'pages/recharge/recharge',
					fn: 'geBankCardInfoAjax',
				})
			},
			timeOut() {

			},
		}
	}
</script>

<style lang="scss" scoped>
	.bank-card-list-container {
		height: 100vh;

		/deep/ .switch-svg {
			position: relative;
		}

		.slot-btn {
			position: absolute;
			width: 186rpx;
			height: 80rpx;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			opacity: 1;
			border: 4rpx dashed #D8D8D8;
			padding: 0;
			right: 0rpx;
			color: #B1BAC8;

			.u-icon {
				color: #2D37D1;
				margin-right: 12rpx;
			}
		}

		.content-box {
			padding-top: 20rpx;
			padding-bottom: 40rpx;
			// height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			.check-box {
				width: 468rpx;
				display: flex;
				border: 2rpx solid #F1F2F6;
				margin-bottom: 60rpx;

				.check-item {
					flex: 1;
					height: 60rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #F1F2F6;
					color: #ACB1C0;
					transition: .2s;

					&.is-checked {
						background-color: #fff;
						color: #1E2432;
					}
				}
			}

			/deep/ .card-banner {
				overflow: visible;
				height: 315rpx;

				.uni-swiper-wrapper {
					overflow: visible;
				}

				.uni-swiper-dot:not(.uni-swiper-dot-active) {
					border: 4rpx solid #E7E7E7;
					box-sizing: border-box;
				}

				.uni-swiper-dots {
					transform: translate(-50%, 70rpx) !important;
					z-index: 100;
				}

				uni-swiper-item {
					padding: 0 10rpx;
					box-sizing: border-box;
				}

				.uni-swiper-slides {}

				.swiper-item {
					height: 100%;
					transform: scale(0.9);
					opacity: 0.8;
					transition: .2s;
					position: relative;

					.bank-card-container {}

					&.is-current {
						opacity: 1;
						transform: scale(1);

						// box-shadow: 0rpx 20rpx 98rpx 0rpx #B8BFEF;
						.bank-card-container {
							// box-shadow: 0rpx 20rpx 98rpx 0rpx #B8BFEF;
						}
					}
				}
			}

			.card-details {
				padding: 0 40rpx;
				padding-top: 114rpx;

				.btnBox {
					display: flex;
					justify-content: space-between;

					>h2 {
						font-size: 34rpx;
						line-height: 40rpx;
						font-weight: normal;
						padding-bottom: 40rpx;
						color: #29304D;
					}
				}




				.u-input.is-focus {
					background-color: red;
				}

				.title-input {
					margin-bottom: 36rpx;
				}
			}

			.btn-box {
				display: flex;
				padding: 0 40rpx;
				margin-top: 182rpx;

				>.u-btn {
					margin: 0;
					width: 316rpx;
					height: 120rpx;

					&:last-child {
						margin-left: 36rpx;
					}
				}
			}

			.partition-line {
				margin: 0 56rpx;
				border-bottom: 2rpx solid #E8E6EA;
				margin-top: 80rpx;
				position: relative;

				>view {
					width: 226rpx;
					height: 66rpx;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					background-color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.icon-box {
				display: flex;
				justify-content: center;
				padding-top: 50rpx;
				padding-bottom: 40rpx;

				>image {
					width: 96rpx;
					height: 96rpx;

					&:last-child {
						margin-left: 40rpx;
					}
				}
			}

			.bank-box {
				width: 100%;
			}

			.usdt-box {
				flex: auto;
				width: 100%;

				.tabs-box {
					display: flex;
					justify-content: center;

					.tabs-group {
						display: flex;
						background-color: #f0f0f1;
						border-radius: 50rpx;
						height: 100rpx;
						margin-bottom: 50rpx;
						justify-content: center;

						>view {
							width: 220rpx;
							color: #fff;
							text-align: center;
							line-height: 100rpx;
							color: black;
							border-radius: 50rpx;
							transition: .2s;

							&.is-active {
								color: #fff;
								// border-radius: 50rpx;
								background-color: #2935d0;
							}
						}
					}
				}

				.title-input,
				.selectBox {
					margin: 30rpx 20rpx;
				}
			}

			.keep-btn,
			.keep-btn2 {
				width: 100%;
				line-height: 120rpx !important;
				height: 120rpx !important;
			}

			.keep-btn2 {
				width: calc(100% - 80rpx);
			}
		}

		.selectBox {
			position: relative;

			.u-input {
				border-radius: 32rpx;
				border: 1px solid #E8E6EA;
				margin-bottom: 40rpx;
				height: 132rpx;
				display: flex;
				align-items: center;
				font-size: 24rpx;
			}

			.bankTitle {
				font-family: SFUIDisplay-Regular, SFUIDisplay;
				text-align: center;
				width: 84rpx;
				height: 34rpx;
				position: absolute;
				top: -16rpx;
				left: 16rpx;
				background-color: #fff;
				font-size: 24rpx;
				color: #999CAD;
				padding: 0 16rpx;
			}
		}


	}

	.edit-btn {
		// padding: 20rpx;
		position: absolute;
		z-index: 1000;
		bottom: 20rpx;
		right: 20rpx;

		.u-btn {
			margin: 0;
			height: 60rpx;
			line-height: 60rpx;
		}
	}
</style>